<template>
    <Modal
        :title="url ? '查看电子签章' : '上传电子签章'"
        :value="value"
        @input="input"
        @on-ok="onOk"
        @on-cancel="onCancel"
    >
        <div class="modal-imgbox modal-content" v-if="url">
            <img :src="imgUrl" style="width: 100%">
            <Icon class="close-img" type="ios-close-circle" :size="24" @click="delModalImg" v-if="!disabled" />
        </div>
        <div class="modal-content" v-else>
            <Upload
                class="modal-upload"
                :disabled="disabled"
                :show-upload-list="false"
                :format="['jpg','jpeg','png','bmp']"
                :max-size="4096"
                :action="action"
                :headers="headers"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :on-success="handleSuccess"
            >
                <div class="upload-tips">
                    <Icon type="md-add" size="80" color="#ccc"/>
                    <p>点击上传图片</p>
                </div>
            </Upload>
        </div>
    </Modal>
</template>
<script>
import config from '@/config'
import { getToken } from '@/libs/util'
export default {
    props: {
        // 禁止上传
        disabled: {
            default: false,
            type: Boolean
        },
        url: {
            type: String,
            default: ''
        },
        value: {
            type: Boolean,
            default: false
        },
        action: {
            type: String,
            default: config.uploadUrl
        },
        headers: {
            type: Object,
            default: _ => ({
                Authorization: getToken()
            })
        }
    },
    computed: {
        imgUrl () {
            return this.$config.visitUrl + this.url
        }
    },
    methods: {
        input (v) {
            this.$emit('input', v)
        },
        // 删除图片
        delModalImg () {
            this.$Modal.confirm({
                title: '提示',
                content: '删除该签章后无法恢复,是否确认删除?',
                onOk: () => {
                    this.$emit('deleted')
                }
            })
        },
        // 图片格式错误
        handleFormatError () {
            this.$Message.error('签章图片格式只支持jpg,jpeg,png,bmp')
        },
        // 图片大小有误
        handleMaxSize () {
            this.$Message.warning('大小不能超过4M')
        },
        // 上传成功
        handleSuccess (res) {
            if (res.code === '0000') {
                this.$emit('upload', res.data)
            } else {
                this.$Message.error(res.msg)
            }
        },
        onOk () {
            this.$emit('on-ok')
        },
        onCancel () {
            this.$emit('on-cancel')
        }
    }
}
</script>
<style lang="less" scoped>
.modal-content {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    .modal-upload {
        width: 100%;
        height: 100%;
        color: #767884;
        position: relative;
        border: 1px dashed #ccc;
        cursor: pointer;
    }
    .upload-tips {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
}
.modal-imgbox {
    position: relative;
    img {
        width: 100%;
        height: 100%;
    }
    .close-img {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
        cursor: pointer;
    }
}
</style>
